<template>
    <main-wrap>
        <div class="loginBox">
            <!-- <div class="logo">
                <img src="/images/logo2.png"/>
            </div> -->
            <div class="logMain">
                <!-- <p class="txt">欢迎使用元界，请您登录</p> -->
                <div class="inputBox">
                    <my-input v-model="username" label="账号" placeholder="请输入账号"/>
                    <my-input v-model="password" type="password" label="密码" placeholder="请输入密码"></my-input>
                    <my-input v-model="captchaValue" label="验证码" placeholder="请输入验证码" style="border:0">
                        <template v-slot:right>
                            <div class="vPic">
								<img v-if="picPath" :src="picPath" alt="验证码" @click="getCaptchaUrl()">
							</div>
                        </template>
                    </my-input>
                </div>
                <!-- <div class="cbxy">
                    <my-checkbox v-model="checked">我同意
                        <router-link to="/policy/1">“用户使用协议”</router-link>
                    </my-checkbox>
                </div> -->
                <div class="btnBox">
                    <my-button text="登录" @click="login"/>
                </div>
            </div>
        </div>
    </main-wrap>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onBeforeUnmount,onMounted } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import mainWrap from '@/components/mainWrap.vue'
import myInput from '@/components/myInput.vue'
import smsCode from '@/components/smsCode.vue'
import myButton from '@/components/myButton.vue'
import myCheckbox from '@/components/myCheckbox.vue'
import {checkMobile,toast} from '@/utils/common'
import {encodeRSA} from '@/utils/encryp'
import Cookies from '@/utils/auth'
export default {
    components:{
        mainWrap,
        myInput,
        smsCode,
        myButton,
        myCheckbox
    },
    setup(){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            username:'',
            password:'',
            flag:false,
            checked:true,
            picPath:'',
            captchaKey:'', // 图形验证码键
            captchaValue:'' // 图形验证码值
        })

        onMounted(()=>{
            // const token = Cookies.get('token')
            // if(token){

            // }
            // 如果直接从地址传入token，则直接进入首页
            getCaptchaUrl()
            const token = route.query.token
            if(token){
                Cookies.set('token',token)
                router.push('/')
            }
            
            const inputInfo = JSON.parse(sessionStorage.getItem('inputInfo'))
            if(inputInfo){
                state.username = inputInfo.username
                state.password = inputInfo.password
            }
        })

        onBeforeUnmount((e)=>{
           // Cookies.set('username',state.username)
            //Cookies.set('code',state.password)
            sessionStorage.setItem('inputInfo',JSON.stringify({username:state.username,password:state.password}))
        })
        const login = async()=>{
            if(!state.username){
                return toast('请输入账号')
            }else if(!state.password){
                return toast('请输入密码')
            }else if(!state.captchaValue){
                return toast('请输入验证码')
            }
	        const password = await encodeRSA(state.password) // 密码加密传输
            const username = await encodeRSA(state.username) // 用户名加密传输
            const res = await store.dispatch('user/login',{
                username,
                password,
                captchaKey:state.captchaKey,
                captchaValue:state.captchaValue
            })
            if(res.code!=200){
                getCaptchaUrl()
                toast(res.message)
            }else{
                Cookies.set('token',res.data)
                router.push('/')
            }
            
        }
        const getCaptchaUrl = () => {
            state.captchaKey = Date.parse(new Date()) // 当前时间戳
            state.picPath = `${import.meta.env.VITE_APP_BASE_API}/login/exchange/captcha/${state.captchaKey}`
        }

        return{
            ...toRefs(state),
            login,
            getCaptchaUrl
        }
    }
}
</script>

<style lang="scss" scoped>
    .loginBox{
        padding: 0;
        .logo{
            width: 173px;
            height: 279px;
            margin: 0 auto;
            margin-top:128px ;
            img{
                display: block;
                width: 100%;
                height: 100%;
            }
        }
        .logMain{
            padding:120px 50px 0 50px;
            .txt{
                color: #fff;
                font-size: 28px;
                padding: 0 0 30px 0;
            }
            .inputBox{
                border: 1px solid var(--baseColor);
                padding: 0 30px;
            }
            .cbxy{
                padding: 30px 0 0 0;
                a{
                    color: var(--baseColor);
                    text-decoration: underline;
                }
            }
            .btnBox{
                padding: 50px 0 0 0;
            }
        }
    }
    .vPic{
        display: flex;
        align-items: center;
        img{
            max-height: 100px;
        }
    }
</style>
